<script setup lang="ts">
// 表单
import {reactive, ref} from "vue";
import router from "@/router";
// 跳转详情
const details = () => {
  router.push("/details");
}
import {kaoshi, append, DeletingEx} from "@/api/teacher/wang/shijuan";
import {onMounted} from "vue";

const formInline = reactive({
  name: "",
  region: "",
  date: "",
  page: 1,
  limit: 5
});
const form = reactive({
  name: '',
  startTime: '',
  endTime: '',
  delivery: false,
})


const dialogFormVisible = ref(false)

const formLabelWidth = '140px'

const tableData: any = ref('')

onMounted(() => {
  a()
})
const total=ref(0)
const a = () => {
  kaoshi(
      {
        name: formInline.name,
        page:formInline.page,
        limit:formInline.limit
      }
  ).then(res => {

    tableData.value = res.data.data
    total.value=res.data.count
    console.log(total.value)
  })
}
// 搜索
const onSubmit = () => {
  kaoshi(formInline.name).then(res => {
    tableData.value = res.data.data
    total.value=res.data.count
    a()
  })
};

// 删除
const DeletingExams = (data: any) => {
  console.log(data.row.id);
  DeletingEx(data.row.id).then(res => {
    total.value=res.data.count
    a()
  })
};

//添加
const add = () => {
  append(form.name, form.endTime, form.startTime).then(res => {
    a()
    total.value=res.data.count
  })
  dialogFormVisible.value = false
}
// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {

  formInline.page=val
  a()

}

</script>

<template>
  <div style="width: 80vw; height: 100vh">
    <div class="common-layout">
      <el-container>
        <el-header class="title"> 考试管理</el-header>
        <el-main>
          <div class="search">
            <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
            >
              <el-form-item>
                <el-input
                    v-model="formInline.name"
                    placeholder="请输入考试名称"
                    clearable
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="dialogFormVisible =true">创建考试</el-button>
          </div>

          <el-dialog v-model="dialogFormVisible" title="创建考试">
            <el-form :model="form">
              <el-form-item label="考试名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-input v-model="form.startTime" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-input v-model="form.endTime" autocomplete="off"/>
              </el-form-item>
            </el-form>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="add">
          确定
        </el-button>
      </span>
            </template>
          </el-dialog>

          <div class="result">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="name" label="考试名称" width="400"/>
              <el-table-column prop="createTime" label="创建时间" width="200"/>
              <el-table-column prop="count" label="题数" width="180"/>
              <el-table-column fixed="right" label="操作">
                <template #default="scope">
                  <el-button
                      link
                      type="primary"
                      size="small"
                      @click="details"
                  >详细
                  </el-button>
                  <el-button
                      link
                      type="primary"
                      size="small"
                      @click="DeletingExams(scope)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>
    <el-pagination

        v-model:current-page="formInline.page"
        v-model:page-size="formInline.limit"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<style scoped>
.search {
  display: flex;
  justify-content: space-between;
}

.title {
  line-height: 55px;
  box-shadow: -1px 1px 1px 3px #f5f7fa;
}
</style>
